import 'package:flutter/material.dart';

// CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件
// 它可以包含多种滚动模型，举个例子，假设有一个页面，顶部需要一个GridView，底部需要一个ListView，
// 而要求整个页面的滑动效果是统一的，即它们看起来是一个整体
// CustomScrollView的子控件必须都是Sliver
class CustomScrollViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 因为本路由没有使用Scaffold，为了让子级Widget(如Text)使用
    // Material Design 默认的样式风格,我们使用Material作为本路由的根
    return Material(
      child: CustomScrollView(
        slivers: <Widget>[
          // AppBar, 包含一个导航栏
          SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text('Custom Scroll View Demo'),
              background: FlutterLogo(),
            ),
          ),

          // Grid
          SliverPadding(
            padding: const EdgeInsets.all(8.0),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  // 创建子widget
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.cyan[100 * (index % 9)],
                    child: Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
          ),

          // List
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                // 创建列表项
                return Container(
                  alignment: Alignment.center,
                  color: Colors.blue[100 * (index % 9)],
                  child: Text('list item $index'),
                );
              },
              childCount: 50,
            ),
          ),
        ],
      ),
    );
  }
}
